<template>
	<view class="myassets">
		<view class="ma_top">
			<view class="mat_top">
				<view class="gay">
					<text>账户总额</text>
					<view style="font-size: 52rpx;color: #f85656;font-weight: bold;"><text>500.00</text></view>
				</view>
				<image src="../../static/myassetspage/book.png" style="width: 32rpx;height: 38rpx;"></image>
			</view>
			<view class="mat_bottom">
				<view>
					<text class="gay">今日收益（元）</text><image src="../../static/myassetspage/gan.png" style="width: 30rpx;height: 30rpx;vertical-align: middle;"></image>
					<view style="font-size: 22rpx;color: #333333;margin-top: 40rpx;"><text>--</text></view>
				</view>
				<view>
					<text class="gay">累计收益（元）</text>
					<view style="font-size: 44rpx;color: #333333;font-weight: bold;margin-top: 22rpx;"><text>2871.50</text></view>
				</view>
			</view>
		</view>
		
		<view class="mat_sec gay">
			<text>成功购买500.00元</text>
			<text>预计3-15日计息 〉</text>
		</view>
		<view class="mat_tall">
			<view class="mat_tir" v-for="item in alldata" :key='item.id'>
				<view >
					<text class="balck">{{item.text1}}</text>
					<view class="gay" style="margin-top: 10rpx;"><text>{{item.text2}}</text></view>
				</view>
				<view>
					<text class="red">{{item.text3}}</text>
					<view class="gay" style="margin-top: 10rpx;"><text>{{item.text4}}</text></view>
				</view>
			</view>
		</view>
		
		
		<view class="mat_fou">
			<text class="balck">收益起始日期</text>
			<view class="gay"><text>2021-03-15</text></view>
		</view>
		<view class="mat_fif">
			<text class="balck">产品详细规则及案例</text>
			<view class="gay"><text>〉</text></view>
		</view>
		
		<view class="bottom">
			<view class="bot_top"><text>今日收益将于20点左右更新</text></view>
			
			<view class="bot_bottom">
				<view class="bott_top"><text>•••</text></view>
				<view class="bott_middle"><text>转出</text></view>
				<view class="bott_bottom"><text>购买</text></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alldata:[
					{id:1,text1:"灵活账户（元）",text2:"近30天年化投资回报率",text3:'0.75',text4:'3.95%'},
					{id:2,text1:"固定账户（元）",text2:"近30天年化投资回报率",text3:'0.25',text4:'5.54%'}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	/* //字体颜色 */
	.gay{
		color: #999999;
		font-size: 24rpx;
	}
	
	.black{
		font-size: 28rpx;
		color: #333333;
	}
	.red{
		font-size: 32rpx;
		color: #f85656;
		font-weight: bold;
	}
	.mat_fif{
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 60rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 5rpx;
		display: flex;
		justify-content: space-between;
	}
	.mat_fou{
		margin-top: 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 60rpx;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
	}
	.mat_tir{
		margin-top: 5rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 60rpx;
		height: 140rpx;
		align-items: center;
	}
	.mat_tall{
		margin-top: 20rpx;
		background-color:#f3f3f3 ;
	}
	.mat_sec{
		margin-top: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 60rpx;
	}
	.myassets{
		background-color:#f3f3f3 ;
	}
	.ma_top{
		height: 360rpx;
		width: 750rpx;
		background-color: #ffffff;
	}
	.mat_top{
		padding: 0 60rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 102rpx;
	}
	.mat_bottom{
		padding: 0 60rpx;
		margin-top: 76rpx;
		display: flex;
		justify-content: space-between;
	}
	
	/* //底部 */
	.bottom{
		margin-top: 200rpx;
	}
	.bot_top{
		text-align: center;
		font-size: 22rpx;
		color: #3476f1;
		background-color: rgba(52,118,241,0.1);
		height: 52rpx;
		line-height: 52rpx;
	}
	.bot_bottom{
		display: flex;
		justify-content: space-between;
	}
	.bott_top{
		width: 99rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background: #ffffff;
		border-right:1rpx solid #dddddd ;
		color: #999999;
	}
	.bott_middle{
		width: 325rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 28rpx;
		background: #ffffff;
		color: #3476f1;
	}
	.bott_bottom{
		width: 325rpx;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #3476f1;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
	}
</style>
